畫面自動加總與日期查詢:車輛用油
https://laihao2.com/Home/VEHICLE_OIL_List
ASP.NET開發操作流程:資料表設定好>再寫程式:加入資料庫>串聯資料庫>產生Models裡面類別檔dao>按:建置>Controllers裡面的Entities>產生畫面View
資料表設定好>再寫程式:加入資料庫>串聯資料庫>
USE [ProductDB]
GO
/****** Object: Table [dbo].[FireExtin] Script Date: 2024/9/21 下午 04:07:22 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[FireExtin](
[FE000] [decimal](18, 0) IDENTITY(1,1) NOT NULL,
[FE001] [nvarchar](50) NULL,
[FE002] [decimal](18, 2) NULL,
[FE003] [nvarchar](10) NULL,
[FE004] [nvarchar](50) NULL,
[FE005] [nvarchar](50) NULL,
[FE006] [decimal](18, 2) NULL,
[FE007] [nvarchar](10) NULL,
[FE008] [nvarchar](10) NULL,
[FE009] [nvarchar](30) NULL,
CONSTRAINT [PK_FireExtin] PRIMARY KEY CLUSTERED
(
[FE000] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
這個 SQL 腳本的作用是創建一個名為 [FireExtin] 的表，並對其進行一些約束和設置。下面對其進行詳細解釋：
USE [ProductDB]這句代碼指定數據庫的上下文，將操作限定在 ProductDB 數據庫中。
SET ANSI_NULLS ON該語句啟用 ANSI_NULLS，這意味著在查詢中使用 = 或 <> 來比較 NULL 值時會遵循 ANSI 標準，即 NULL 與任何值比較都返回 UNKNOWN，包括與自身比較。
SET QUOTED_IDENTIFIER ON此設置開啟 QUOTED_IDENTIFIER，允許使用雙引號來引用對象名稱（如列名或表名），而不將其視為字符串文本。
CREATE TABLE [dbo].[FireExtin]創建一個名為 [FireExtin] 的表，位於數據庫的 dbo 架構下。
[FE000] [decimal](18, 0) IDENTITY(1,1) NOT NULL: 這是一個 decimal 類型的列，長度為 18 位整數，無小數部分，並且是一個自增列（IDENTITY(1,1) 表示從 1 開始，每次遞增 1）。此列不能為 NULL，即必填。 NULL: 一個長度為 50 的可變字符列（nvarchar），允許存儲 Unicode 字符，可以為 NULL。[FE002] [decimal](18, 2) NULL: 這是一個 decimal 類型的列，最大長度為 18 位數，其中有 2 位小數，可以為 NULL。 NULL: 一個長度為 10 的 nvarchar 列，可以為 NULL。 NULL: 一個長度為 50 的 nvarchar 列，可以為 NULL。 NULL: 一個長度為 50 的 nvarchar 列，可以為 NULL。[FE006] [decimal](18, 2) NULL: 一個 decimal 類型的列，最大長度為 18 位數，其中有 2 位小數，可以為 NULL。 NULL: 一個長度為 10 的 nvarchar 列，可以為 NULL。 NULL: 一個長度為 10 的 nvarchar 列，可以為 NULL。 NULL: 一個長度為 30 的 nvarchar 列，可以為 NULL。CONSTRAINT [PK_FireExtin] PRIMARY KEY CLUSTERED ([FE000] ASC)：為 FE000 列設置主鍵（PRIMARY KEY），並使用聚集索引（CLUSTERED），表示這列中的每個值都是唯一的且不能為 NULL，並且數據會按照該列的順序存儲（ASC 表示升序排列）。WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF)：這部分定義了索引的屬性，如是否填充索引頁、是否允許行鎖或頁鎖等。
PAD_INDEX = OFF：不對索引的填充因子進行額外填充。STATISTICS_NORECOMPUTE = OFF：允許自動統計重新計算。IGNORE_DUP_KEY = OFF：不忽略重覆的主鍵值。ALLOW_ROW_LOCKS = ON：允許在索引上進行行級鎖定。ALLOW_PAGE_LOCKS = ON：允許在索引上進行頁級鎖定。OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF：不對順序鍵進行優化。ON [PRIMARY]：表示表的數據和索引將存儲在默認的主文件組（PRIMARY）中。此 SQL 腳本的功能是創建一個名為 FireExtin 的表，表中包含 10 列，其中 FE000 是自增的主鍵列，其余列是 nvarchar 或 decimal 類型，並允許為空 (NULL)。
識別規格 選 是 才會自動增加
產生Models裡面類別檔dao>按:建置>
namespace WebApplication5.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Data.Entity.Spatial;
[Table("FireExtin")]
public partial class FireExtin
{
[Display(Name = "滅火器名稱")]
[StringLength(50)]
public string FE001 { get; set; }
[Display(Name = "數量")]
[Column(TypeName = "numeric")]
public decimal? FE002 { get; set; }
[Display(Name = "位置")]
[StringLength(10)]
public string FE003 { get; set; }
[Display(Name = "廠區")]
[StringLength(50)]
public string FE004 { get; set; }
[Display(Name = "內含物")]
[StringLength(50)]
public string FE005 { get; set; }
[Display(Name = "原始填充量(kg/瓶)")]
[Column(TypeName = "numeric")]
public decimal? FE006 { get; set; }
[Display(Name = "管理部門")]
[StringLength(10)]
public string FE007 { get; set; }
[StringLength(10)]
public string FE008 { get; set; }
[Display(Name = "相片連結")]
[StringLength(30)]
public string FE009 { get; set; }
[Key]
[Column(TypeName = "numeric")]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public decimal FE000 { get; set; }
}
}
解釋程式碼
這是一個使用 C# 和 Entity Framework 創建的模型類，名為 FireExtin，表示數據庫中的 FireExtin 表。它使用了 Data Annotations 來指定數據驗證和數據庫映射屬性。讓我們逐字段解釋這段代碼的含義：
[Table("FireExtin")]
public partial class FireExtin
Table("FireExtin"): 將這個類映射到數據庫中的 FireExtin 表。public partial class FireExtin: 定義一個部分類 FireExtin，這個類可以與其他部分類合並，共同構成完整的類。FE001:
[Display(Name = "滅火器名稱")]
[StringLength(50)]
public string FE001 { get; set; }
Display(Name = "滅火器名稱"): 指定在用戶界面中顯示該字段的名稱為 "滅火器名稱"（滅火器名稱）。StringLength(50): 限制該字段最多只能存儲 50 個字符。public string FE001 { get; set; }: FE001 是一個字符串類型的字段，用於表示滅火器的名稱。FE002:
[Display(Name = "數量")]
[Column(TypeName = "numeric")]
public decimal? FE002 { get; set; }
Display(Name = "數量"): 顯示名為 "數量"（數量）。Column(TypeName = "numeric"): 指定數據庫中該字段的類型為 numeric。decimal? FE002 { get; set; }: FE002 是可為空的 decimal 類型，表示滅火器的數量。FE003:
[Display(Name = "位置")]
[StringLength(10)]
public string FE003 { get; set; }
Display(Name = "位置"): 顯示名為 "位置"（位置）。StringLength(10): 限制字符串長度為 10。public string FE003 { get; set; }: 表示滅火器所在的具體位置。FE004:
[Display(Name = "廠區")]
[StringLength(50)]
public string FE004 { get; set; }
Display(Name = "廠區"): 顯示名為 "廠區"（廠區）。StringLength(50): 限制字符串長度為 50。public string FE004 { get; set; }: 表示滅火器所在的廠區名稱。FE005:
[Display(Name = "內含物")]
[StringLength(50)]
public string FE005 { get; set; }
Display(Name = "內含物"): 顯示名為 "內含物"（內含物）。StringLength(50): 限制字符串長度為 50。public string FE005 { get; set; }: 表示滅火器內部的材料或內容物。FE006:
[Display(Name = "原始填充量(kg/瓶)")]
[Column(TypeName = "numeric")]
public decimal? FE006 { get; set; }
Display(Name = "原始填充量(kg/瓶)"): 顯示名為 "原始填充量(kg/瓶)"。Column(TypeName = "numeric"): 指定數據庫類型為 numeric。decimal? FE006 { get; set; }: 表示滅火器的原始填充量（每瓶公斤數），可以為空。FE007:
[Display(Name = "管理部門")]
[StringLength(10)]
public string FE007 { get; set; }
Display(Name = "管理部門"): 顯示名為 "管理部門"（管理部門）。StringLength(10): 限制字符串長度為 10。public string FE007 { get; set; }: 表示負責滅火器的管理部門。FE008:
[StringLength(10)]
public string FE008 { get; set; }
StringLength(10): 限制字符串長度為 10。public string FE008 { get; set; }: 這個字段沒有指定顯示名稱，功能未說明，可能是預留的備用字段。FE009:
[Display(Name = "相片連結")]
[StringLength(30)]
public string FE009 { get; set; }
Display(Name = "相片連結"): 顯示名為 "相片連結"（相片鏈接）。StringLength(30): 限制字符串長度為 30。public string FE009 { get; set; }: 表示與滅火器相關的照片鏈接。FE000:
[Key]
[Column(TypeName = "numeric")]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public decimal FE000 { get; set; }
Key: 指定此字段為主鍵。Column(TypeName = "numeric"): 數據庫中的字段類型為 numeric。DatabaseGenerated(DatabaseGeneratedOption.Identity): 指示數據庫自動生成此字段的值（自增主鍵）。public decimal FE000 { get; set; }: 表示主鍵字段 FE000，用於唯一標識每個滅火器記錄。此類是用於表示 "滅火器" 表的數據模型，每個字段代表滅火器的屬性，包括名稱、數量、位置、內容物等。通過 Data Annotations 來限制字段長度、指定數據庫類型，以及提供顯示名和主鍵等功能。
這裡的ProductDBContext 參考前幾天，也是要填入
Controllers裡面的Entities>
public ActionResult FireExtin_List(string searchString)
{
ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";
var fireExtins = _db.FireExtin.AsQueryable();
if (!string.IsNullOrEmpty(searchString))
{
fireExtins = fireExtins.Where(fe => fe.FE001.Contains(searchString) ||
fe.FE002.ToString().Contains(searchString) ||
fe.FE003.Contains(searchString) ||
fe.FE004.Contains(searchString) ||
fe.FE005.Contains(searchString) ||
fe.FE006.ToString().Contains(searchString) ||
fe.FE007.Contains(searchString) ||
fe.FE008.Contains(searchString) ||
fe.FE009.Contains(searchString)
// 添加其他需要搜索的欄位
);
}
return View(fireExtins.ToList());
}
解釋程式碼
這段代碼是一個 ASP.NET MVC 中的控制器方法 FireExtin_List，用於在前端顯示 FireExtin 表的數據列表，並提供搜索功能。以下是對這段代碼的詳細解釋：
ActionResult FireExtin_List(string searchString):
ActionResult，表示一個頁面的響應。searchString 的字符串參數，用於從前端接收用戶的搜索關鍵詞。ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";:
~/Views/Shared/_Layout.cshtml 作為頁面的布局模板。ViewBag 是一個動態的容器，用來將數據從控制器傳遞到視圖。var fireExtins = _db.FireExtin.AsQueryable();:
_db 中獲取 FireExtin 表的數據，生成一個 IQueryable 對象 fireExtins，表示可以對 FireExtin 數據集進行查詢和操作。if (!string.IsNullOrEmpty(searchString)):
searchString 是否為空或 null，確保只有在用戶提供搜索關鍵詞時，才會執行後續的搜索邏輯。fireExtins = fireExtins.Where(...):
fireExtins 列表，檢查數據的多個字段是否包含 searchString。Where 方法會篩選出滿足條件的記錄，以下是對每個字段的過濾：
fe.FE001.Contains(searchString)：檢查 FE001 字段是否包含 searchString。fe.FE002.ToString().Contains(searchString)：將 FE002 字段轉換為字符串並檢查是否包含 searchString。FE003, FE004, FE005, FE006, FE007, FE008, FE009) 也依次檢查它們是否包含 searchString。return View(fireExtins.ToList());:
fireExtins 數據轉換為列表，並通過 View() 方法將數據傳遞給視圖，最終渲染到前端頁面。FireExtin 表的多個字段中搜索匹配的記錄。如果用戶輸入了搜索關鍵詞，系統會在 FireExtin 的各個字段中查找包含該關鍵詞的記錄，並將結果顯示到前端頁面。產生畫面View
@model IEnumerable<WebApplication5.Models.FireExtin>
@{
/*Layout = null;*/
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>依照滅火器內容</h3>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>FireExtin_List</title>
</head>
<body>
@*<p>
@Html.ActionLink("Create New", "Create")
</p>*@
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.FE001)
</th>
<th>
@Html.DisplayNameFor(model => model.FE002)
</th>
<th>
@Html.DisplayNameFor(model => model.FE003)
</th>
<th>
@Html.DisplayNameFor(model => model.FE004)
</th>
<th>
@Html.DisplayNameFor(model => model.FE005)
</th>
<th>
@Html.DisplayNameFor(model => model.FE006)
</th>
<th>
@Html.DisplayNameFor(model => model.FE007)
</th>
@*
<th>
@Html.DisplayNameFor(model => model.FE008)
</th>*@
<th>
@Html.DisplayNameFor(model => model.FE009)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.FE001)
</td>
<td>
@Html.DisplayFor(modelItem => item.FE002)
</td>
<td>
@Html.DisplayFor(modelItem => item.FE003)
</td>
<td>
@Html.DisplayFor(modelItem => item.FE004)
</td>
<td>
@Html.DisplayFor(modelItem => item.FE005)
</td>
<td>
@Html.DisplayFor(modelItem => item.FE006)
</td>
<td>
@Html.DisplayFor(modelItem => item.FE007)
</td>
@*
<td>
@Html.DisplayFor(modelItem => item.FE008)
</td>*@
<td>
@Html.DisplayFor(modelItem => item.FE009)
</td>
<td>
@{
//var imagePath = "~/files/" + item.FE009;
//var imagePath = "~/templates/ColdCoal.jpg" + item.FE009;
var imagePath = "~/templates/FireExtin.jpg";
var imageUrl = Url.Content(imagePath);
var imageFileName = item.FE009; // 使用 FE009 欄位中的檔案名稱
}
<a href="@imageUrl" target="_blank" title="@imageFileName">@imageFileName</a>
</td>
@*
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.FE000 }) |
@Html.ActionLink("Details", "Details", new { id = item.FE000 }) |
@Html.ActionLink("Delete", "Delete", new { id = item.FE000 })
</td>*@
</tr>
}
</table>
</body>
</html>
解釋程式碼
這段程式碼是一個 ASP.NET MVC 的 Razor 視圖，用來顯示「車輛用油」的列表頁面，並包含加油種類的匯總以及資料篩選功能。讓我們分解一下它的關鍵部分：
Model 宣告：
@model IEnumerable<WebApplication5.Models.VEHICLE_OIL>
這行宣告了此視圖的模型是一個包含 VEHICLE_OIL 的集合，這個模型將用來顯示車輛用油的相關數據。
Layout 設定：
Layout = "~/Views/Shared/_Layout.cshtml";
設定使用共享的佈局檔案 _Layout.cshtml，將此視圖嵌入到通用的頁面結構中。
加油種類匯總：
<td>@Model.Where(m => m.OIL_TYPE == "汽油").Sum(m => m.LITERS)</td>
<td>@Model.Where(m => m.OIL_TYPE == "柴油").Sum(m => m.LITERS)</td>
在這裡，篩選模型中 OIL_TYPE 為「汽油」和「柴油」的項目，然後分別對 LITERS（公升數）進行加總，以顯示總油量。
日期篩選表單：
<form method="get" action="@Url.Action("VEHICLE_OIL_List", "Home")">
<label for="startDate">開始日期：</label>
<input type="date" name="startDate">
<label for="endDate">結束日期：</label>
<input type="date" name="endDate">
<button type="submit">搜索</button>
</form>
提供開始日期和結束日期的輸入框，用戶可以輸入日期範圍進行搜尋。表單提交後會透過 GET 請求傳遞到 VEHICLE_OIL_List action。
資料表格顯示：
<table class="table">
<tr>
<th> 項次 </th>
<th>@Html.DisplayNameFor(model => model.DOCUMENT_DATA)</th>
<th>@Html.DisplayNameFor(model => model.CATEGORY)</th>
<!-- 其他欄位略去 -->
</tr>
@foreach (var item in Model)
{
<tr>
<td>@(counter++)</td>
<td>@Html.DisplayFor(modelItem => item.DOCUMENT_DATA)</td>
<td>@Html.DisplayFor(modelItem => item.CATEGORY)</td>
<!-- 其他欄位略去 -->
</tr>
}
</table>
這段程式碼會列出車輛用油的資料，通過 @foreach 遍歷 Model 來顯示每一筆數據的詳細內容。每個項目都會顯示例如 DOCUMENT_DATA、CATEGORY、LITERS 等欄位。
隱藏的功能：
程式碼中有多處使用 @* ... *@ 將功能註解掉，比如：
樣式與排版：
<style>
.align-right {
text-align: right;
}
</style>
加入了一個簡單的樣式，定義了 align-right 用來右對齊文字。不過目前在表格中還未使用。
此程式碼的功能包括：
大家明天見~
iThome鐵人賽
看影片追技術